<template>
  <div>
    <div v-if="loading">Loading...</div>
    <cv-data-table
      v-else
      :columns="columns"
      :title="title"
      :helper-text="helperText"
      :loading="loading"
      :pagination="{ numberOfItems: this.totalRows }"
      @pagination="$emit('pagination', $event)"
      @search="onFilter" 
      v-model="rowSelects" 
      @row-select-change="actionRowSelectChange"   
    >      
      <template slot="data">
        <cv-data-table-row v-for="(row, rowIndex) in data" :key="`${rowIndex}`" :value="`${rowIndex}`"> 
          <cv-data-table-cell v-for="(cell, cellIndex) in row.data" :key="`${cellIndex}`">
            <template v-if="!cell.url">
              {{cell}}
            </template>
            <link-list v-else :url="cell.url" :homepage-url="cell.homepageUrl" />
          </cv-data-table-cell>

       <!-- <cv-data-table-cell>
           <cv-overflow-menu flip-menu cell-style="margin: 0 auto;">
               <cv-overflow-menu-item>Edit</cv-overflow-menu-item>
               <cv-overflow-menu-item>Test</cv-overflow-menu-item>
           </cv-overflow-menu>
       </cv-data-table-cell> -->

		    <cv-data-table-cell cell-style="text-align:center;">   
            <!-- <cv-table-row-action @click="clicky('edit',row)" >
              <Edit16 /><label>编辑</label>
            </cv-table-row-action>          	
            <cv-table-row-action @click="clicky('resource',row)">
              <bulleted16 /><label>资源</label>
            </cv-table-row-action>            	      -->
            <cv-table-row-action v-if="canAdd" @click="clicky('add',row)">
              <Active16 /><label>收藏</label>
            <cv-table-row-action v-if="canRemove" @click="clicky('remove',row)" >
              <TrashCan16 /><label>删除</label>
            </cv-table-row-action>              
            </cv-table-row-action>
          </cv-data-table-cell>           
          
          <template slot="expandedContent">
          {{ row.description }}
          </template>              
        </cv-data-table-row>
      </template> 

      <template slot="actions">
      <cv-button small @click="actionNew" >Create</cv-button>            
      </template> 

      <!-- <template slot="batch-actions">
        <cv-button @click="onBatchAction1">
        Delete
        <TrashCan16 class="bx--btn__icon"/>
        </cv-button>
        <cv-button @click="onBatchAction2">
        Save
        <Save16 class="bx--btn__icon"/>
        </cv-button>
        <cv-button @click="onBatchAction3">
        Download
        <Download16 class="bx--btn__icon"/>
        </cv-button>
      </template>  -->

      <template v-slot:items-selected="{scope}">{{scope.count}} items selected.</template>     
    </cv-data-table>
    <cv-data-table-skeleton
      v-if="loading"
      :columns="columns"
      :title="title"
      :helper-text="helperText"
      :rows="10"
    />    
  </div>
</template>

<script>
import LinkList from './LinkList';
import Edit16 from '@carbon/icons-vue/es/edit/16';
import TrashCan16 from '@carbon/icons-vue/es/trash-can/16';
import Save16 from "@carbon/icons-vue/es/save/16";
import Download16 from "@carbon/icons-vue/es/download/16";
import filtericon16 from "@carbon/icons-vue/es/filter/16";
import bulleted16 from "@carbon/icons-vue/es/list--bulleted/16";
import Active16 from "@carbon/icons-vue/es/watson-health/3D-cursor--alt/16.js";

import {CvTableRowAction} from '../../components/carbon/cv-table-row-action';

export default {
  name: 'RepoTable',
  components: { LinkList, Edit16, TrashCan16, CvTableRowAction, Download16, Save16, filtericon16,bulleted16,Active16 },
  props: {
    headers: Array,
    rows: Array,
    title: String,
    helperText: String,
    loading: Boolean,
    totalRows: Number,
    canAdd:{type:Boolean,default:true},
    canRemove:{type:Boolean,default:true},
  },
    data(){
      return {
        rowSelects:[],
        flipMenu: true,
      }
    },  
  computed: {
    columns() {
      return this.headers.map(header => header.header);
    },
    data() {
      return this.rows.map(row => ({
        data: [
          row.name,
          row.createdAt,
          row.updatedAt,
          row.issueCount,
          row.stars,
          row.links,
        ],
        description: row.description,
        originalData:row
      }));
    },
  },
	methods:{
	    clicky(action,value) {
	      console.log('clicky :', action," value:",value);
	      this.$emit(action, value);
      },
      onFilter(value) {
          // eslint-disable-next-line
          console.log('filtering for ' + value);
          this.$emit("filter", value);
      },          	
      onBatchAction1() {
          // eslint-disable-next-line
          console.log('back action1');
      },        
      onBatchAction2() {
          // eslint-disable-next-line
          console.log('back action2');
      },        
      onBatchAction3() {
          // eslint-disable-next-line
          console.log('back action3');
      },     
      filterChange() {
          // console.log(val);
          // eslint-disable-next-line 
          console.log(this.languagefilter);
      },  
      actionNew() {
          // eslint-disable-next-line
          console.log('actionNew');
          //this.$router.push(`/titles/create/`);
          this.$emit("create");
      },  
      actionRowSelectChange(val) {
          // eslint-disable-next-line
          console.log('row select change');
          // eslint-disable-next-line 
          console.log(val);
      },                 
  },  
};
</script>
